import Component from './index.vue';
import { dataTypeList, viewList, outputEventList,
   regionOptions,columnList } from './../constants'

const meta = {
  componentName: 'MapDocument',
  title: '主视觉',
  imgName:'view2',
  props: [
    {
      name: 'componentId',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '组件编号',
      defaultValue: '',
    },
    {
      name: 'column',
      propType: {
        type: 'string',
        required: false,
      },
      desc: '适用比例',
      defaultValue: '',
    },
    {
      name: 'title',
      rules: {
        type: 'string',
        required: true,
      },
      desc: '组件标题',
      defaultValue: ''
    },
    {
      name: 'desc',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '组件描述',
      defaultValue: ''
    },
    {
      name: 'mapId',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '主视觉',
      defaultValue: '',
      visible: false
    },
    {
      name: 'imageId',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '组件缩略图',
      defaultValue: ''
    },
    // 通用属性
    {
      name: 'dataType',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '取数方式',
      defaultValue: ''
    },
    {
      name: 'dataSet',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '数据配置',
      defaultValue: '',
      visible: false
    },
    {
      name: 'isDrillingDown',
      rules: {
        type: 'boolean',
        required: false,
      },
      desc: '是否支持下钻',
      defaultValue: false
    },
    {
      name: 'refreshFrequency',
      rules: {
        type: 'number',
        required: false,
      },
      desc: '数据刷新频率',
      defaultValue: 60
    },
    {
      name: 'isDesensitization',
      rules: {
        type: 'boolean',
        required: false,
      },
      desc: '脱敏配置',
      defaultValue: false
    },
    {
      name: 'desensitizationFields',
      rules: {
        type: 'array',
        required: false,
      },
      desc: '脱敏字段',
      defaultValue:  []
    },
    {
      name: 'outputEvents',
      rules: {
        type: 'array',
        required: false,
      },
      desc: '可输出事件',
      defaultValue:  []
    },
    {
      name: 'inputEvents',
      rules: {
        type: 'array',
        required: false,
      },
      desc: '可输入事件',
      defaultValue:  []
    },
    // 特殊组件属性
    {
      name: 'defaultRegionId',
      rules: {
        type: 'string',
        required: false,
      },
      desc: '默认视角',
      defaultValue: ''
    },
    // {
    //   name: 'viewDrillingSet',
    //   rules: {
    //     type: 'string',
    //     required: false,
    //   },
    //   desc: '视角下钻配置',
    //   defaultValue: ''
    // },
    {
      name: 'isCarousel',
      rules: {
        type: 'boolean',
        required: false,
      },
      desc: '自动轮播',
      defaultValue: false
    },
    {
      name: 'carouselInterval',
      rules: {
        type: 'number',
        required: false,
      },
      desc: '轮播间隔',
      defaultValue: 1
    },
  ],
  configure: {
    basicProps: {
      title: '组件基本信息',
      override: [
        {
          name: 'componentId',
          setter: 'StringSetter',
        },
        {
          name: 'column',
          setter: {
            componentName: 'SelectSetter',
            props: {
              options: columnList,
            },
          },
        },
        {
          name: 'title',
          setter: 'InputSetter',
        },
        {
          name: 'desc',
          setter: {
            componentName:'InputSetter',
            props:{
              maxlength: 500,
              type:'textarea',
            }
          },
        },
        {
          name: 'mapId',
          setter: {
            componentName: 'SelectSetter',
            props: {
              options: viewList,
              // onBeforeChange: (value: string, node: any) => {
              //     const selectionView:any = getViewList.find((item: any) => item.id === value);
              //     node.value.props.mapName = selectionView.label;
              //   return value;
              // }
            },
          },
        },
       {
        name:'imageId',
        setter: {
          componentName: 'UploadSetter',
        }
       }
      ]
    },
    commonProps: {
      title: '组件通用属性',
      override: [
        {
          name: 'dataType',
          setter: {
            componentName: 'SelectSetter',
            props: {
              options: dataTypeList,
              onBeforeChange: (value: String, node: any) => {
                node.value.componentMeta.props.forEach((item:any) => {
                  if(item.name === 'dataSet') {
                    // 取数类型为静态数据时，则数据配置显示
                    item.visible = value === '2' ? true : false;
                  }
                });
                return value;
              }
            },
          },
        },
        {
          name: 'dataSet',
          setter: 'EditMockSetter',
        },
        {
          name: 'isDrillingDown',
          setter: 'BooleanSetter',
        },
        {
          name: 'refreshFrequency',
          setter: {
            componentName: 'NumberSetter',
            props: {
              text: '分钟刷新一次'
            },
          }
        },
        {
          name: 'isDesensitization',
          setter: 'BooleanSetter',
        },
        {
          name: 'desensitizationFields',
          setter: 'DesensitizationFieldSetter',
        },
        {
          name: 'outputEvents',
          setter: {
            componentName: 'ListSetter',
            props: {
              options: ['资产类型', '告警类型', '单位'],
            },
          },
        },
        {
          name: 'inputEvents',
          setter: {
            componentName: 'CheckboxSetter',
            props: {
              options: outputEventList,
            },
          },
        },
      ]
    },
    specialProps: {
      title: '组件特殊属性',
      override: [
        {
          name: 'defaultRegionId',
          setter: {
            componentName: 'RegionSetter',
            props: {
              options: regionOptions,
              onBeforeChange: (value: string, node: any) => {
              return value[value.length - 1];
            }
            },
          },
        },
        // {
        //   name: 'viewDrillingSet',
        //   setter: {
        //     componentName: 'SelectSetter',
        //     props: {
        //       options: viewDrillingSetList,
        //     },
        //   },
        // },
        {
          name: 'isCarousel',
          setter: {
            componentName: 'BooleanSetter',
            props: {
              onBeforeChange: (value: boolean,node:any) => {
                // 根据是否开启轮播，修改轮播间隔的显示隐藏
                node.value.componentMeta.props.forEach((item:any) => {
                    if(item.name === 'carouselInterval') {
                      item.visible = value;
                    }
                  })
                return value
              }
            },
          },
        },
        {
          name: 'carouselInterval',
          setter: {
            componentName:'NumberSetter',
            props:{
              maxlength: 60,
              text: '秒进入一下点位'
            }
          },
        },

      ]
    }
  },
}

export default {
  componentName: meta.componentName,
  componentMeta: meta,
  component: Component
}
